<template>
  <div class="article-page">
    <nav class="my-nav van-hairline--bottom">
      <a href="javascript:;" :class="{active: sorter === 'weight_desc '}" @click="sorter = 'weight_desc '">
        推荐</a
             >

      <a
        href="javascript:;" :class="{active: sorter === null}" @click="sorter = null"
        >最新</a
             >

      <div class="logo"><img src="@/assets/logo.png" alt=""></div>

    </nav>
    <van-list @load="onLoad" v-model="isLoading"  :finished="finished"  finished-text="没有更多了">

      <ArticleItem v-for="item in articleList" :key="item.id" :item="item" />
    </van-list>
  </div>

</template>

<script>
import { getArticlesAPI } from '@/api/article'
import ArticleItem from '@/components/ArticleItem.vue'

export default {
  name: 'article-page',
  components: {
    ArticleItem
  },
  data () {
    return {
      isLoading: false,
      current: 1,
      articleList: [],
      totalPages: 333,
      finished: false,
      sorter: 'weight_desc '
    }
  },
  methods: {
    async loadData () {
      this.isLoading = true
      const res = await getArticlesAPI({
        current: this.current,
        sorter: this.sorter
      })
      this.articleList.push(...res.data.rows)
      this.isLoading = false
      this.totalPages = res.data.pageTotal
      this.current++
      console.log(res)
      if (this.current > res.data.pageTotal) {
        this.finished = true
      }
    },
    onLoad () {
      this.loadData()
    }
  },
  watch: {
    sorter () {
      this.articleList = []
      this.current = 1
      this.finished = false
      if (this.isLoading) { return }
      this.loadData()
    }
  }

}
</script>

<style lang="less" scoped>
  .article-page {
    margin-bottom: 50px;
    margin-top: 44px;
    .my-nav {
      height: 44px;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 999;
      background: #fff;
      display: flex;
      align-items: center;
      > a {
        color: #999;
        font-size: 14px;
        line-height: 44px;
        margin-left: 20px;
        position: relative;
        transition: all 0.3s;
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          width: 0;
          height: 2px;
          background: #222;
          transition: all 0.3s;
        }
        &.active {
          color: #222;
          &::after {
            width: 14px;
          }
        }
      }
      .logo {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        > img {
          width: 64px;
          height: 28px;
          display: block;
          margin-right: 10px;
        }
      }
    }
  }

</style>
